<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- 1、头部 -->
<head th:replace="fragment/frontend_fragment::head(分类页面)"></head>

<!-- 2、中间内容body(导航nav, 底部footer) -->
<body>
<!-- 容器局部刷新 -->
<div id="pageContainer">
    <div class="bg-type">
    <!-- 2.1：导航栏 -->
    <nav th:replace="~{fragment/frontend_fragment::nav(2)}"></nav>

    <br>
    <br>
    <br>

    <!-- 2.2：中间内容---分类内容 -->
    <div class="m-container-middle m-padded-tb-big m-opacity m-phone-opacity">
        <!--文章-->
        <div class="ui container">  <!--拥有：响应式的效果-->
            <!--头介绍-->
            <div class="ui top attached segment border-radius" style="background: whitesmoke">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui header" style="color: teal;">分类</h3>
                    </div>

                    <div class="right aligned column">
                        <span class="ui header" style="color: teal;">共</span> <span
                            class="m-font-number" th:text="${#arrays.length(types)}"> 14 </span> <span
                            class="ui header" style="color: teal;">类</span>
                    </div>
                </div>
            </div>

            <!--分类-->
            <div class="ui attached segment redius-bottom" th:unless="${null == types || types.size == 0}">
                <div class="ui  labeled  button m-margin-tb-tiny" th:each="type : ${types}">
                    <a th:href="@{/frontend/types/{id}(id=${type.id})}" class="ui basic button"
                       th:classappend="${currentTypeId == type.id} ? teal" th:text="${type.name}">
                        人生路
                    </a>

                    <a th:href="@{/frontend/types/{id}(id=${type.id})}" href="#" class="ui  basic left pointing label"
                       th:classappend="${currentTypeId == type.id} ? teal" th:text="${#arrays.length(type.blogs)}">
                        22
                    </a>
                </div>
            </div>

            <!--博客内容-->
            <div class="ui segment title-front-redius" th:unless="${null == page.getList() || page.getList().size == 0}"
                 th:each="blog : ${page.getList()}">
                <div class="ui padded-lr vertical m-padded-tb-small  m-mobile-clear segment">
                    <div class="ui middle aligned mobile reversed stackable grid">
                        <div class="eleven wide column m-padded-tb-small">
                            <div class="title-header m-margin-bottom-middle"><a class="m-black" target="_blank"
                                                                                th:href="@{/frontend/blog/{id}(id=${blog.id})}"
                                                                                th:text="${blog.title}"></a></div>
                            <p class="m-text m-margin-top-larger-px" th:text="|${blog.description}...|">
                                随着岁月的境迁, 同学们的差距会越来越来大？这是什么原因呢？ 很大程度上，读书阶段就已经造就了这种局面。
                                我想这便是自我约束力的丧失。导致生活任意妄为， 浑浑噩噩，每天混迹于
                            </p>

                            <div class="ui m-margin-top-larger-px grid">
                                <div class="thirteen wide column">
                                    <div class="ui mini horizontal link list">
                                        <div class="item">
                                            <img src="/images/avatar.jpg" th:src="@{${blog.user.avatar}}" alt=""
                                                 class="ui avatar image">
                                            <div class="content"><a th:href="@{/frontend/about}" target="_blank"
                                                                    class="header"
                                                                    th:text="${blog.user.nickname}">哈哈</a>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <i class="calendar icon"></i><span
                                                th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}">2021-03-02</span>
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i> <span th:text="${blog.views}">477</span>
                                        </div>
                                        <div class="item">
                                            <i class="comment outline icon"></i><span
                                                th:text="${blog.commentNum}">5</span>
                                        </div>
                                    </div>
                                </div>


                                <div class="right aligned three wide column">
                                    <a target="_blank"
                                       class="ui teal basic label m-padded-tiny m-text-thin font-spacing"
                                       th:text="${blog.type.name}">框架底层原理</a>
                                </div>
                            </div>
                        </div>

                        <div class="five wide column">
                            <a href="#" th:href="@{/frontend/blog/{id}(id=${blog.id})}" target="_blank">
                                <img th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!--新版换页-->
            <div class="ui pagination menu" style="width: 100%"
                 th:unless="${null == page.getList() || page.getList().size() == 0}">
                <!--上一页-->
                <a class="item left aligned"
                   th:href="@{/frontend/types(myid=${currentTypeId},pagenum=${page.getPageNum()-1}, pagesize=${page.pageSize})}"
                   th:styleappend="${page.isIsFirstPage()} ? 'cursor: not-allowed'"
                   th:onclick="${page.isIsFirstPage()} ? 'return false'">
                    <i class="left arrow icon"></i> Previous
                </a>


                <!--页码索引-->
                <div class="item " th:classappend="${page.getPageNum()} == ${pageNum} ? 'active'"
                     th:each="pageNum:${page.navigatepageNums}" style="padding: 2px 7px 2px 7px">
                    <a th:onclick="${page.getPages() <= 1} ? 'return false'"
                       style="line-height: 24px; margin: 0; background: #87ceeb" class="ui circular label  pageBtn"
                       th:href="@{/frontend/types(myid=${currentTypeId},pagenum=${pageNum}, pagesize=${page.pageSize})}"
                       th:text="${pageNum}" th:classappend="${page.getPageNum()} == ${pageNum} ? 'myRed'">2</a>
                </div>

                <!--下一页-->
                <a class="item right aligned"
                   th:href="@{/frontend/types(myid=${currentTypeId}, pagenum=${page.getPageNum()+1}, pagesize=${page.pageSize})}"
                   th:styleappend="${page.isIsLastPage()} ? 'cursor: not-allowed'"
                   th:onclick="${page.isIsLastPage()} ? 'return false'">
                    Next <i class="icon right arrow"></i>
                </a>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 2.3：底部footer -->
<footer th:replace="fragment/frontend_fragment::footer"></footer>

<!-- 3、js引用 -->
<!--/*/<th:block th:replace="fragment/frontend_fragment :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<!-- 4、页面专用js -->
<script>

    // 移动端 导航栏点击显示
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>

</body>

</html>